<template>
    <div
        v-if="previewImg"
        @click="handlePreviewImg"
        class="preview-img-box"
        :style="{ width: width + 'rpx', height: height + 'rpx', 'border-radius': round + 'rpx' }">
        <image :src="previewImg" mode="aspectFill" class="preview-img" />
    </div>
</template>

<script>
import { getFileUrlById } from '@/api/upload';
export default {
    props: {
        // 图片 地址 or id
        img: {
            type: String | Number,
            default: ''
        },
        // 图片宽度
        width: {
            type: Number | String,
            default: 120
        },
        // 图片高度
        height: {
            type: Number | String,
            default: 120
        },
        // 图片圆角
        round: {
            type: Number | String,
            default: 12
        }
    },
    data() {
        return {
            previewImg: '' // 预览图
        };
    },
    methods: {
        /**
         * 预览图片
         * */
        handlePreviewImg() {
            uni.previewImage({
                urls: [this.previewImg],
                showmenu: true
            });
        }
    },
    watch: {
        img: {
            handler(val) {
                if (val) {
                    // 监听是否为私域图片
                    if (val && !String(val).includes('http')) {
                        getFileUrlById(val).then((res) => {
                            this.previewImg = res;
                        });
                    } else {
                        this.previewImg = val;
                    }
                }
            },
            // 表示同时监听初始化时的props的show的意思
            immediate: true
        }
    }
};
</script>

<style lang="scss" scoped>
.preview-img-box {
    overflow: hidden;
    .preview-img {
        width: 100%;
        height: 100%;
    }
}
</style>
